<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #wrapper {
            width: 1000px;
            margin: 50px auto;
        }
        img {
            width: 100%;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <div class="items">

    </div>
</div>
</body>
<script src="./js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/jquery.waterfall.js"></script>
<script>
    $(document).ready(function(){
       $.ajax({
           url:'./waterfall_php/1.php',
           type:"POST",
           dataType:'json',
           success:function (data) {
               console.log(data);
               let arr = data;
               for(let i=0;i<arr.length;i++){
                   let $li = $('<div></div>');
                   $li.attr('class','item');
                   let $img= $('<img>');
                   $img.attr('src',arr[i].url)
/*                       .css({
//                           height:arr[i].height,
//                           width:arr[i].width
                       });*/
                   let $p = $('<p></p>');
                   $p.html(arr[i].text);
                   $li.append($img);
                   $li.append($p);
                   $('.items').append($li);
               };
               $('.items').waterfall();
           },
           error:function (err) {
               console.log(err)
           }
       });
    });
</script>

</html>